<template>
  <div class="w-full h-full flex-column">
    <backstage-title title="包月收费管理" icon-class="money-active" class="f-bold-title mb-20" />
    <Filtering
      :filters="filters"
      @onFilter="handleFilter"
      @reset="reset"
    />
    <Table
      :page-data="pageData"
      :table-data="tableData"
      @pagination="getList"
    >
      <template #action="slotInfoProps">
        <el-button
          type="text"
          size="medium"
          @click="handleDetail(slotInfoProps.info.row)"
        >配置</el-button>
      </template>
    </Table>

    <dialog-tpl class="form-dialog" :dialog-config="dialogConfig">
      <template #dialogContent>
        <component
          :is="dialogConfig.componentTag"
          :dialog-config="dialogConfig"
          @reload="getList"
        ></component>
      </template>
    </dialog-tpl>
  </div>
</template>

<script>
import Configuration from './components/configuration.vue'
import Parking from '@/services/parking-list.js'
export default {
  components: {
    Configuration
  },
  data () {
    return {
      filters: [
        {
          type: 'select',
          value: '',
          label: '车场名称',
          options: [],
          placeholder: '请输入车场名称关键字'
        },
      ],
      pageData: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      tableData: {
        columns: [
          { label: '车场名称', prop: 'parkName' },
          { label: '车场记录编号', prop: 'parkNo' },
          { label: '3个月包月金额(元)', prop: 'price3' },
          { label: '6个月包月金额(元)', prop: 'price6' },
          { label: '12个月包月金额(元)', prop: 'price' },
          { label: '包月名额(人)', prop: 'maxTotal' },
          { label: '操作', prop: 'action', slot: true, width: 80 },
        ],
        data: [
        ],
        config: {
          index: true
        },
        pageConfig: {
          choose: false
        }
      },
      dialogConfig: {
        show: false,
        title: '包月收费配置',
        width: '30%',
        data: {},
        componentTag: 'Configuration'
      }
    }
  },
  computed: {
    searchParams () {
      const [parkNo,
      ] = this.filters.map(i => i.value)
      return {
        parkNo, isOperate: 1
      }
    }
  },
  created () {
    this.getList()
    this.getParking()
  },
  methods: {
    handleFilter () {
      this.pageData.page = 1
      this.getList()
    },
    getList () {
      const { page: pageNum, pageSize} = this.pageData
      Parking.ParkingList({...this.searchParams, pageNum,pageSize}).then(res => {
        const { rows: tableData, total } = res
        this.tableData = {
          ...this.tableData,
          data: tableData
        }
        this.pageData = {
          ...this.pageData,
          total
        }
      })
    },
    getParking () {
      Parking.ParkingList({pageNum: 1, pageSize: 9999, isOperate: 1}).then(res => {
        this.filters[0].options = (res.rows || []).map(i => ({ label: i.parkName, value: i.id, ...i}))
      })
    },
    handleDetail (row = {}) {
      this.dialogConfig = {
        show: true,
        title: '包月收费配置',
        width: '30%',
        data: {...row},
        componentTag: 'Configuration'
      }
    },
    reset () {
      this.filters = this.filters.map(i => ({...i,value: ''}))
      this.getList()
    }
  }
}
</script>

